<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../style/fjol_style.css"/>
		<link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
		<link href="../css/xzx_style.css" rel="stylesheet" />
		<link href="../css/xzx_pull_refresh.css" rel="stylesheet" />
	</head>

	<body>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src='../js/md5.js'></script>
		<script src="../js/xzx.open.js"></script>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view" id="houseList">
				</ul>
			</div>
		</div>
		
		<script type="text/javascript">
			var _type = 2; //1新房，2二手房，3租房
			var _pageNo = 1;
			var _lstData;
			
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						height: 50, //可选,默认50.触发下拉刷新拖动距离,
						auto: false, //可选,默认false.首次加载自动下拉刷新一次
						contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback: pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次 
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullUpLoadMore
					}
				}
			});
			
			mui.plusReady(function() {
				var centerView= plus.webview.currentWebview();
				var parentPage = centerView.parent();
				mui.fire(parentPage,'onClientSubPageReady');
				openDetailPage(_type);
			});
			
			document.addEventListener('configClientSubpage',function(event){
				_type = event.detail.type;
				mui('#refreshContainer').pullRefresh().pulldownLoading();
//				console.log(_type);
			});
			
			//下拉刷新
			function pulldownRefresh() {
				mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
				var ul = document.querySelector('.mui-table-view');
				_pageNo = 1;
				if(_type ==1){	//新房
					getMyNewHouseData(_pageNo, function(lstClient) {
						ul.innerHTML = '';
						if(lstClient.length > 0) {
							ul.insertBefore(createNewhouseFragment(ul, lstClient, false), ul.firstChild);
						}else if(lstClient.length == 0) {
							var _li = document.createElement('li');
							_li.className = 'mui-text-center';
							_li.innerHTML = '<img src="../images/icon_blank.png"/>';
							ul.insertBefore(_li,null);
//							console.log(ul.innerHTML);
						}
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					}, function() {
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					});
				}else{
					getMyHouseData(_pageNo, _type, function(lstClient) {
						ul.innerHTML = '';
						if(lstClient.length > 0) {
							ul.insertBefore(createFragment(ul, lstClient, false), ul.firstChild);
						}else if(lstClient.length == 0) {
							var _li = document.createElement('li');
							_li.className = 'mui-text-center';
							_li.innerHTML = '<img src="../images/icon_blank.png"/>';
							ul.insertBefore(_li,null);
//							console.log(ul.innerHTML);
						}
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					}, function() {
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					});
				}
				openDetailPage(_type);
			}
			
			//上拉加载
			function pullUpLoadMore() {
				var ul = document.querySelector('.mui-table-view');
				_pageNo++;
				if(_type == 1){	//新房
//					console.log(_type);
					getMyNewHouseData(_pageNo,function(lstClient) {
//						console.log(JSON.stringify(lstClient));
						if(lstClient.length > 0) {
							ul.appendChild(createNewhouseFragment(ul, lstClient, true));
						}
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(lstClient.length);
					}, function() {
						mui('#refreshContainer').pullRefresh().endPullupToRefresh();
					});
				}else{
					getMyHouseData(_pageNo, _type, function(lstClient) {
						if(lstClient.length > 0) {
							ul.appendChild(createFragment(ul, lstClient, true));
						}
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(lstClient.length);
					}, function() {
						mui('#refreshContainer').pullRefresh().endPullupToRefresh();
					});
				}
					
				openDetailPage(_type);
			}
			var getMyHouseData = function(page, kind, successCallback, failCallback) {

				var userInfo = common.myStorage.getItem('userInfo');
				var param = [{
					key: 'clientId',
					value: userInfo.clientId
				}, {
					key: 'kind',
					value: kind
				}, {
					key: 'page',
					value: page
				}, {
					key: 'rows',
					value: 10
				}];
				var net = fjNetwork;
				net.get('fjzx/client/house-collection-list.json', param, function(data) {
					//成功
					successCallback(data.rows);
//					console.log(JSON.stringify(data));
					
					var imgObj = $('.mui-table-view-cell img');
//					console.log(imgObj.length);
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
//							console.log($(this).width()+','+$(this).height());
							var rate = parseFloat($(this).height()/$(this).width());
//							console.log(rate);
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
				}, function(message) {
					//失败
					mui.toast(message);
					failCallback();
				});
			};
			var buildingHouseTypePageList;
			var getMyNewHouseData = function(page, successCallback, failCallback) {
				
				var userInfo = common.myStorage.getItem('userInfo');
				var param = [{
					key: 'clientId',
					value: userInfo.clientId
				}, {
					key: 'page',
					value: page
				}, {
					key: 'rows',
					value: 10
				}];
				var net = fjNetwork;
				net.get('fjzx/client/building-house-type-collection-list.json', param, function(data) {
					//成功
//					console.log(JSON.stringify(data));
					successCallback(data.rows);
					buildingHouseTypePageList = data.rows;
				}, function(message) {
					//失败
					mui.toast(message);
					failCallback();
				});
			};
			var createFragment = function(ul, lstHouse) {
				var fragment = document.createDocumentFragment();
				var li;
				var keywordCls = [
									'keyword-color1 ',
									'keyword-color2 ',
									'keyword-color3 ',
									'keyword-color4 '
								];
								
				for(var i = 0; i < lstHouse.length; i++) {
					li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					var houseInfo = lstHouse[i];
					li.setAttribute("id",houseInfo.id);
					var data = new Array();
					data.push('<a class="flex" style="margin-right:6px">');
					data.push('<div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">');
					if(houseInfo.coverImage){
						data.push('<img class="mui-pull-left mr5" style="width:96px; height:76px;" src="'+houseInfo.coverImage+'">');
					}else{
						data.push('<img class="mui-pull-left mr5" style="width:96px; height:76px;" src="../images/tophone.png">');
					}
					data.push('</div>');
					data.push('<div class="flexcell">');
					if(_type == 3){
						data.push('<div class="nowrap">['+houseInfo.leaseTypeName+']'+houseInfo.title+'</div>');
					}else{
						data.push('<div class="nowrap">'+houseInfo.title+'</div>');
					}
					
	                data.push('<div class="flex">');
	                data.push('<p class="flexcell" style="width:100%">'+houseInfo.bedRoomNumber+'室'+houseInfo.livingRoomNumber+'厅&nbsp;'+houseInfo.square+'平方</p>');
	                if(_type == 3){
	                	data.push('<div class="newRed"><span class="f14" style="font-weight: bold;">'+houseInfo.leasePriceMonth+'</span><span class="f08">元/月</span></div>');
	                }else{
	                	data.push('<div class="newRed"><span class="f14" style="font-weight: bold;">'+parseInt(houseInfo.totalPrice / 10000)+'</span><span class="f08">元/平</span></div>');
	                }
	                data.push('</div>');
	                data.push('<p>'+houseInfo.area+' &nbsp;'+houseInfo.buildingName+'</p>');
	                	var keywords = houseInfo.keyword?houseInfo.keyword.replace(' ',''):'';
	                 if(keywords.length>0){
			                	words = keywords.split(',');
			                	for (i in words) {
			                		var j = i%keywordCls.length;
				                	data.push('<button type="button" class="mui-btn '+keywordCls[j]+' keyword-btn">'+words[i]+'</button>');
				                }
			               }
	                 
	                data.push('</div>');
	                
	                data.push('</a>');
	                
					li.innerHTML = data.join('');
					fragment.appendChild(li);
				}
				
				return fragment;
			};
			
			var createNewhouseFragment = function(ul, lstHouse) {
				var fragment = document.createDocumentFragment();
//				var li;
				var keywordCls = [
									'keyword-color1 ',
									'keyword-color2 ',
									'keyword-color3 ',
									'keyword-color4 '
								];
				var i=0;
				
				for(var j = 0; j < lstHouse.length; j++) {
//					console.log(lstHouse[j].buildingId);
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell2 mb10 p10';
					var houseInfo = lstHouse[j];
					li.setAttribute("id",houseInfo.buildingId);
					var keywords = houseInfo.keyword?houseInfo.keyword.replace(' ',''):'';
					var str = new Array();
					str.push('<div class="bd9 mb5">');
					str.push(houseInfo.title);
					str.push('</div>');
					str.push('<span class="mr5">'+houseInfo.bedRoomNumber+'室'+houseInfo.livingRoomNumber+'厅'+houseInfo.toiletNumber+'卫</span>');
					str.push('<span class="mr5">建筑面积 '+houseInfo.square+'㎡</span>');
					str.push('<span>均价 '+(houseInfo.averagePrice?houseInfo.averagePrice:"0")+'元/套</span>');
					str.push('<div class="mt5">');
					if(keywords.length>0){
						var words = keywords.split(',');
						for (vari=0; i<words.length; i++) {
							var j = i%keywordCls.length;
							console.log(words[i]);
							str.push('<span class="'+keywordCls[j]+'">'+words[i]+'</span>');
						}
					}
					str.push('</div>');
					str.push('<div class="mt5 mui-text-center">');
					str.push('<img class="" src="'+houseInfo.coverImage+'" width="100%"/>');
					str.push('</div>');
					li.innerHTML = str.join('');
					fragment.appendChild(li);
				}

				return fragment;
			};
			
			var openDetailPage = function(type){
				if(type == 1){
					mui('.mui-table-view').on('tap','.mui-table-view-cell2',function(){
//				console.log(_type);
					//户型详情
						openFileWindowWithPage('../new_house','layout_detail',{
							listData:buildingHouseTypePageList,
							buildingId:this.getAttribute('id')
						});
						
				});
				}else{
					
					mui('.mui-table-view').on('tap','.mui-table-view-cell',function(){
						mui.openWindow({
							url:'../house_detail.html',
							id:'house_detail',
							extras:{
								houseId:this.getAttribute('id')
							}
						})
					});
	
				}
			}
			
		</script>
	</body>

</html>